<template>
  <el-input type="number" :value="value" :name="options.name" @input="updateValue" :placeholder="placeholder" :pattern="pattern"  v-on="$listeners" v-bind="$attrs" :disabled="!editable"/>
</template>

<script>
import { exportWidthInfo } from "../../utils";
export default {
	name: "v-number",
	props: {
		value: [String, Number],
		options: {
			type: Object,
			required: true
		},
		editable: Boolean
	},
	data() {
		return {
			placeholder: this.options.placeholder
		};
	},
	computed: {
		pattern() {
			let options = this.options;
			if (
				(options.allowDecimals == undefined &&
					options.allowNegative == undefined) ||
				(options.allowDecimals && options.allowNegative)
			) {
				return "^-?[0-9,\\.]*$"; //所有数字
			} else if (
				options.allowDecimals == false &&
				options.allowNegative == false
			) {
				return "^[0-9]*$"; //正整数，0
			} else if (options.allowDecimals == false) {
				return "^-?[0-9]*$"; //正整数，0，负整数
			} else if (options.allowNegative == false) {
				return "^[0-9,\\.]*$"; //正整数，正小数，0
			}
		}
	},
	methods: {
		updateValue(val) {
			this.$emit("input", val);
		}
	},
	created() {
		this.$emit("dispatch-width", exportWidthInfo(this.options.display));
	}
};
</script>

<style>
input[type="number"] {
	-moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
</style>
